<!-- 62-->
<template>
  <div>
  <a-space class="common-button-group" >
          <a-button
            type="primary"
            :loading="searchBtnLoading"
            @click="getDataList('search')"
            >{{ $t("T9_search") }}</a-button
          >
  </a-space>
  <t-query-form
      layout="inline"
      ref="queryForm"
      group="ChangeGlassAttributes"
      :rules="rules"
      :model="queryForm"
    >
      <a-row>
        <a-col :span="6">
          <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId">
            <a-select
              v-model:value="queryForm.shopId"
              class="select-width"
              show-search
              allow-clear
              @change="changeShopId"
            >
              <a-select-option
                v-for="item in shopIdArr"
                :key="item.shopId"
                :value="item.shopId"
              >
                {{ item.shopId }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_cstId')" name="cstId" prop="cstId">
            <a-input v-model:value="queryForm.cstId" allow-clear />
          </a-form-item>
        </a-col>
      </a-row>
  </t-query-form>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_glassList")
      }}</a-col>
      <a-col :span="6" class="global-oper-row-extra">
        <a-button type="primary" @click="getDataList('export')">{{
          $t("T9_toExcel")
        }}</a-button>
      </a-col>
    </a-row>
    <div class="tableArea">
      <t-table :data="table.data" max-height="100%">
        <t-column type="checkbox"  title="Select" v-model:checked="checkedList" min-width="60"/>
        <t-column field="glassId" :title="$t('T9_glassId')" min-width="100"/>
        <t-column field="shopId" :title="$t('T9_shopId')" min-width="100" />
        <t-column field="productType" :title="$t('T9_productType')" min-width="100" />
        <t-column field="productId" :title="$t('T9_productId')" min-width="100" />
        <t-column field="route" :title="$t('T9_route')" min-width="100" />
        <t-column field="Operation" :title="$t('T9_operation')" min-width="100" />
        <t-column field="bayId" :title="$t('T9_bayId')" min-width="100"/>
        <t-column field="owner" :title="$t('T9_owner')" min-width="100" />
        <t-column field="glassType" :title="$t('T9_glassType')" min-width="100"/>
        <t-column field="gls/pnlQty" :title="$t('T9_glsPnlQty')" min-width="100"/>
        <t-column field="state" :title="$t('T9_state')" min-width="100"/>
        <t-column field="reworkState" :title="$t('reworkState')" min-width="100" />
        <t-column field="processState" :title="$t('T9_processState')" min-width="100"/>
        <t-column field="holdState" :title="$t('T9_holdState')" min-width="100"/>
        <t-column field="lastEventName" :title="$t('T9_lastEventName')" min-width="120"/>
        <t-column field="priority" :title="$t('T9_priority')" min-width="100"/>
        <t-column field="eqpId" :title="$t('T9_eqpId')" min-width="100" />
        <t-column field="portId" :title="$t('T9_portId')" min-width="100"/>
        <t-column field="eventUser" :title="$t('T9_eventUser')" min-width="100"/>
        <t-column field="DueDate" :title="$t('T9_dueDate')" min-width="100"/>
        <t-column field="recipeName" :title="$t('T9_recipeName')" min-width="100" />
        <t-column field="portState" :title="$t('T9_portState')" min-width="100"/>
      </t-table>
    </div>
    <t-query-form
      layout="inline"
      ref="dataForm"
      :model="dataForm"
      :rules="dataFormRules"
    >
      <a-col :span="6">
        <a-form-item :label="$t('T9_owner')" name="owner" prop="owner">
          <a-select
            v-model:value="dataForm.owner"
            class="select-width"
            show-search
            allow-clear
          >
            <a-select-option v-for="item in ownerArr" :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item
          :label="$t('T9_department')"
          name="department"
          prop="department"
        >
          <a-select
            v-model:value="dataForm.department"
            class="select-width"
            show-search
            allow-clear
          >
            <a-select-option
              v-for="item in departmentArr"
              :key="item"
              :value="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item :label="$t('T9_priority')" name="priority" prop="priority">
          <a-select
            v-model:value="dataForm.priority"
            class="select-width"
            show-search
            allow-clear
          >
            <a-select-option
              v-for="item in priorityArr"
              :key="item"
              :value="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item
          :label="$t('T9_experimentNo')"
          name="experimentNo"
          prop="experimentNo"
        >
          <a-input v-model:value="queryForm.experimentNo" allow-clear />
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item :label="$t('T9_dueTime')" name="dueTime" prop="dueTime">
          <a-select
            v-model:value="dataForm.dueTime"
            class="select-width"
            show-search
            allow-clear
          >
            <a-select-option
              v-for="item in dueTimeArr"
              :key="item"
              :value="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </t-query-form>
    <t-query-form
      layout="inline"
      ref="dataForm"
      :rules="dataFormRules"
      :model="dataForm"
    >
      <a-row style="padding: 8px">
        <a-col :span="19">
          <a-form-item class="textAreaForm" :label="$t('T9_comment')" name="comment" prop="comment">
            <a-textarea
              type="textArea"
              rows="1"
              v-model:value="dataForm.comment"
              :title="dataForm.comment"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col
          :span="5"
          style="display: flex; align-items: center; justify-content: flex-end"
        >
          <a-button type="primary" @click="showConfirm">{{
            $t("T9_confirm")
          }}</a-button>
        </a-col>
      </a-row>
    </t-query-form>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import {
    getProductType, getList, getOwnerId, getMaskSpec
  } from '@/api/common'
  import { getProductId } from '@/api/viewShippedBoxPalletInformation'
  // import { getCurrentDate } from '@/utils/utils'
  import { downloadBlobFile } from '@/utils/download'

  export default defineComponent({
    name: 'ChangeGlassAttributes',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: []
        },
        checkedList: true,
        shipUnShipArr: [
          'Actual Ship',
          'Ship',
          'PalletUnShip',
          'CellReceivedShipBackChangedPallet',
          'CrossShip',
          'Return',
          'CrossOutShip'
        ],
        shopIdArr: [{ shopId: 'ARRAY' }, { shopId: 'CF' }, { shopId: 'CELL' }],
        maskSpecArr: [],
        productIdArr: [],
        productTypeArr: [],
        priorityArr: [0, 1, 2, 3],
        ownerArr: [4, 5, 6, 7],
        departmentArr: [8, 9, 10, 1],
        dueTimeArr: [0, 0, 0, 0],
        cleanStateArr: ['Clean', 'Dirty'],
        queryForm: {
          shopId: '',
          maskSpec: '',
          maskId: '',
          experimentNo: '',
          cstId: ''
        },
        dataForm: {
          timeUsedLimit: '',
          maskUsedLimit: '',
          priority: '',
          cleanState: '',
          maskNote: '',
          comment: '',
          owner: '',
          department: '',
          dueTime: ''
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'blur'
            }
          ],
          cstId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'blur'
            }
          ]
        },
        dataFormRules: {
          comment: [
            {
              required: true,
              message: this.$t('T9_comment'),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    computed: {},
    watch: {},
    created() {},
    methods: {
      onChange(value) {
        this.queryForm.Date = value
      },
      changeShopId() {
        this.getMaskSpec()
      },
      getMaskSpec() {
        const params = {
          shopId: this.queryForm.shopId
        }
        getMaskSpec(params).then((res) => {
          this.maskSpecArr = res
        })
      },
      getDataList(type) {
        const obj = {
          dtoName: 'ChangeMaskAttributeMaskListDTO',
          controlSite: '',
          currentSite: '',
          durableState: 'Available',
          durableType: 'Mask',
          eqpId: '',
          export: false,
          maskLayer: '',
          maskSpc: this.queryForm.maskSpec,
          queryId: 'GetDurableList',
          shopId: 'CELL',
          version: '80002',
          menuName: 'changeMaskAttributes',
          usage: 'getMaskList'
        }
        if (this.queryForm.shipUnShip === 'return') {
          obj.version = '80031'
        } else if (this.queryForm.shipUnShip === 'CrossOutShip') {
          obj.version = '8038'
        } else {
          obj.version = '8030'
        }
        if (type === 'search') {
          obj.export = false
          getList(obj).then((res) => {
            this.table = res.viewShippedBoxPalletListDTOList
            this.dataForm.sumBoxQty = res.sumBoxQty
            this.dataForm.sumPanelQty = res.sumPanelQty
          })
        } else {
          obj.export = true
          getList(obj).then((res) => {
            downloadBlobFile(res, 'palletBoxList')
          })
        }
      },
      showConfirm() {
        this.$refs.dataForm
          .validate()
          .then(() => {
            this.visible = true
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang="less" scoped>
/deep/ .ant-row,
.ant-row:after,
.ant-row:before {
  display: flex;
  flex: 1;
}
.tableArea {
  width: 100%;
  height: 26vh;
  padding-bottom: 8px;
}

.textAreaForm {
  /deep/ .ant-input {
    // width: auto!important;
    height: 32px;
  }
}
</style>
